<template>
	<view class="jewelry-page">
		<navigation :navigationMsg="navigationMsg"></navigation>
		<view class="box">
			<!-- 搜索 -->
			<view class="search">
				<u-search placeholder="请输入饰品关键字" v-model="inputVal" @blur="searchData()" @search="gosearch()"
					bgColor="white" height="45" :showAction="false"></u-search>
				<view class="sift" @click="sift">
				</view>
			</view>
			<!-- 商城列表 -->
			<view class="list" v-if="dataList.length">
				<view class="list-item" v-for="(item,index) in dataList" @click="go_detailType(item,index)">
					<view class="imgbox">
						<view class="img" :style="{ backgroundImage: 'url(' + item.image + ')' }"></view>
						<!-- 	<view class="wear">
							<view class="type" style="background-color: red;"></view>
							<view class="text">
								<span style="color:green;" v-if="item.wear=='崭新出场'">崭新出场</span>
								<span style="color:#5cb85c;" v-if="item.wear=='略有磨损'">略有磨损</span>
								<span style="color:#f0ad4e;" v-if="item.wear=='久经沙场'">久经沙场</span>
								<span style="color:#d9534f;" v-if="item.wear=='残破不堪'">残破不堪</span>
								<span style="color:#993A38;" v-if="item.wear=='战痕累累'">战痕累累</span>
							</view>
						</view> -->
					</view>
					<view class="msg">
						<view class="top">
							<view class="name">{{item.name}}</view>
						</view>
						<view class="bottom">
							<view class="price">￥{{item.price}}</view>
							<view class="sum">在售10件</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<u-popup :show="siftShow" :closeOnClickOverlay="true" mode="right" @close="siftClose" @open="siftOpen">
			<view class="siftBox">
				<view class="sift-top">类型
					<view class="back" @click="siftBack"></view>
				</view>
				<view class="sift-main">
					<view class="left">

					</view>
					<view class="right">

					</view>
				</view>
				<view class="sift-bottom">
					<button class="reset">重置</button>
					<button class="sure">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import navigation from '../../components/navigation.vue'
	export default {
		data() {
			return {
				navigationMsg: {
					title: "商城"
				},
				siftShow: false,
				dataList: [],
				pageNum: 10,
				query: "",
				results: [],
				inputVal: ""
			}
		},
		watch: {
			inputVal(newValue) {
				if (newValue) {
					this.searchData(true);
				} else {
					this.searchData(false);
				}
			},
		},
		components: {
			navigation
		},
		mounted() {
			this.getList(this.pageNum)
		},
		onReachBottom() {
			this.getList(this.pageNum)
		},
		methods: {
			gosearch() {
				console.log(this.inputVal)
				let data = {
					name: this.inputVal,
					page: 10,
					limit: 20,
					index: "home"
				}
				uni.request({
					url: "/api/jewerly/index",
					method: "POST",
					name: "求生匕首（★） | 蓝钢 (久经沙场)",
					data: data
				}).then(res => {
					console.log(res.data.data.data)
					if (res.data.data.data == []) {

						uni.showToast({
							title: '没有找到您搜寻的结果',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					} else {
						this.dataList = res.data.data.data
					}
				})
			},
			searchData(bool) {
				console.log(this.inputVal)
				let data = {
					name: this.inputVal,
					page: 10,
					limit: 20,
					index: "home"
				}
				uni.request({
					url: "/api/jewerly/index",
					method: "POST",
					name: "",
					data: data
				}).then(res => {
					console.log(res.data.data.data)
					if (res.data.data.data == []) {

						uni.showToast({
							title: '没有找到您搜寻的结果',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					} else {
						this.dataList = res.data.data.data
					}
				})
			},


			getList(pageNum) {
				let data = {
					page: pageNum,
					limit: 20
				}
				// console.log(data);
				uni.request({
					url: "/api/jewerly/index",
					method: "GET",
					name: "",
					data: data
				}).then((res) => {
					let List = res.data.data.data
					if (List.length >= 0) {
						this.dataList = this.dataList.concat(List)
						this.pageNum++
					}
				})
			},
			//打开筛选
			sift() {
				this.siftShow = true
			},
			//筛选弹出开
			siftOpen() {
				console.log('open');
			},
			//筛选弹出关
			siftClose() {
				this.siftShow = false
				console.log('close');
			},
			//筛选返回
			siftBack() {
				this.siftShow = false
			},
			//商品种类页
			go_detailType(item, index) {
				let data = {
					name: item.name,
					image: item.image,
					price: item.price
				}
				let msg = JSON.stringify(data)
				uni.navigateTo({
					url: `/pages/detail-type/detail-type?msg=${msg}`
				})
			},
		}
	}
</script>
<style type="text/css">
	@import url("@/static/icon/style.css");
</style>
<style lang="scss" scoped>
	.jewelry-page {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;

		.box {
			width: 90%;
			height: 81vh;

			.search {
				width: 100%;
				height: 10vw;
				display: flex;

				.sift {
					width: 15vw;
					height: 10vw;
					display: flex;
					justify-content: center;
					font-family: "icomoon";
					font-size: 9vw;
					color: #8c8c8c;
				}

				.sift::before {
					margin-left: 3vw;
					margin-top: 0.5vw;
					content: "\e90f";
				}
			}

			.list {
				width: 100%;
				height: 76vh;

				display: flex;
				flex-wrap: wrap;
				margin-top: 2vw;

				.list-item {
					width: 43vw;
					height: 50vw;
					background-color: white;
					border-radius: 1vw;
					margin-top: 3vw;
					overflow: hidden;

					.imgbox {
						width: 100%;
						height: 28vw;
						background-image: linear-gradient(to top, #999999, #ccc);
						position: relative;

						.img {
							width: 100%;
							height: 28vw;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}

						.wear {
							position: absolute;
							width: 15vw;
							height: 5vw;
							top: 0;
							left: 0;
							display: flex;


							.type {
								width: 2vw;
								height: 5vw;
							}

							.text {
								width: 13vw;
								height: 5vw;
								background-color: black;
								font-size: 3vw;
								display: flex;
								justify-content: center;
								align-items: center;
								font-weight: bold;
							}
						}
					}

					.msg {
						width: 100%;
						height: 22vw;

						.top {
							width: 100%;
							height: 11vw;

							.name {
								width: 100%;
								height: 6vw;
								font-size: 4.5vw;
								font-weight: bold;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-indent: 1vw;
							}
						}

						.bottom {
							width: 100%;
							height: 11vw;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								font-size: 4.5vw;
								font-weight: bold;
								color: #EEA20E;
								margin-left: 2vw;
							}

							.sum {
								color: #ccc;
								font-size: 3vw;
								margin-right: 2vw;
							}
						}
					}
				}

				.list-item:nth-child(2n) {
					margin-left: 4vw;
				}
			}

			.empty {
				width: 100%;
				height: 76vh;
			}
		}

		.siftBox {
			width: 80vw;
			height: 100vh;
			display: flex;
			flex-direction: column;

			.sift-top {
				width: 100%;
				height: 8vh;
				text-align: center;
				border-bottom: 1px solid #ccc;
				line-height: 8vh;
				font-size: 5vw;
				font-weight: bold;
				position: relative;

				.back {
					width: 7vw;
					height: 7vw;
					position: absolute;
					line-height: 6vw;
					left: 5vw;
					top: 6vw;
					font-size: 5vw;
					font-family: "icomoon";
				}

				.back::before {
					content: "\e91d";
				}
			}

			.sift-main {
				width: 100%;
				height: 84vh;
				display: flex;

				.left {
					width: 60vw;
					height: 100%;
				}

				.right {
					width: 20vw;
					height: 100%;
					background-color: #f3f3f3;
				}
			}

			.sift-bottom {
				width: 100%;
				height: 8vh;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border-top: 1px solid #ccc;

				>button {
					width: 37vw;
					height: 10vw;
					font-size: 4vw;
				}

				.reset {
					background-color: #e3e5e6;
					color: black;
				}

				.reset:active {
					background-color: #333333;
					color: white;
				}

				.sure {
					background-color: #333333;
					color: white;
				}

				.sure:active {
					background-color: #e3e5e6;
					color: black;
				}
			}
		}
	}
</style>